 <template>
  <div v-if="books.length > 0">
    <table id="goods">
      <thead>
        <tr>
          <td>书籍序号</td>
          <td>书籍名称</td>
          <td>出版日期</td>
          <td>价格</td>
          <td>购买数量</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in books" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <!-- //替换2017/05/03 为    2017-05-03 -->
          <td>{{ item.data.replace(/\//g, "-") }}</td>
          <td>{{ "￥" + item.price.toFixed(2) }}</td>
          <td>
            <button @click="cut(index)" :disabled="item.count <= 0">-</button>
            {{ item.count }}
            <button @click="add(index)">+</button>
          </td>
          <td><button @click="remove(index)">移除</button></td>
        </tr>
      </tbody>
    </table>
    <div>
      <h3>总价：{{ "￥" + price.toFixed(2) }}</h3>
      <p>
        <router-link
          v-if="price > 0"
          :to="{ path: '/pay', query: { moneys: price } }"
        >
          <input id="Orders" type="button" value="提交订单" />
        </router-link>
        <input v-else id="Orders" type="button" value="提交订单" @click="msg" />
      </p>
    </div>
  </div>
  <h3 v-else>购物车已清空啦。。。。</h3>
</template>
 
 <script>
export default {
  data() {
    return {
      price: 0,
      books: [
        {
          id: 1,
          name: "《算法导论》",
          data: "2006/09/18",
          price: 85.0,
          count: 0,
        },
        {
          id: 2,
          name: "《UNIX编程艺术》",
          data: "2006/02/23",
          price: 59.0,
          count: 0,
        },
        {
          id: 3,
          name: "《编程珠玑》",
          data: "2008/10/01",
          price: 39.0,
          count: 0,
        },
        {
          id: 4,
          name: "《代码大全》",
          data: "2006/03/10",
          price: 128.0,
          count: 0,
        },
        {
          id: 5,
          name: "《活着》",
          data: "2020/03/10",
          price: 58.8,
          count: 0,
        },
      ],
    };
  },
  methods: {
    cut(index) {
      if (this.books[index].count > 0) {
        this.books[index].count--;
        this.price -= this.books[index].price;
      }
    },
    add(index) {
      this.books[index].count++;
      this.price = 0;
      this.books.map((x) => {
        this.price += x.price * x.count;
      });
    },
    //移除按钮
    remove(index) {
      //  Vue.set(this.books,index)

      let countOK = this.books[index].count;
      if (countOK <= 0) {
        this.books.splice(index, 1);
        console.log(index + "你已被删除");
      } else {
        alert("当前购买数量大于零,不可移除,请先清空购买数量再进行移除");
      }
    },
    msg() {
      alert("你没有选择任何商品哦，亲");
    },
  },
};
</script>
 
<style>
td {
  padding: 8px 16px;
  border: 1px solid pink;
  text-align: left;
}
th {
  background-color: pink;
  color: #5c6b77;
  font-weight: 600;
}
#goods {
  margin: 100px auto;
  font-size: 20px;
  color: rgb(28, 176, 196);
  border: 1px solid pink;
  border-collapse: collapse;
  border-spacing: 0;
}
h3 {
  color: orange;
  font-size: 30px;
}
#Orders {
  font-size: 20px;
}
</style>